<template>
	<view>
		<u-navbar :is-back="false" :title="opacity == 1 ? productInfo.goodsName || '商品详情' : ' '" title-color="#ffffff"
			immersive back-icon-color="#ffffff" :background="{
				background: 'linear-gradient(90deg, rgba(255, 55, 104, ' + opacity + '), rgba(252, 97, 97, ' + opacity + '))'
			}" :border-bottom="false">
			<view @click="back" class="back-icon" :style="{
					backgroundColor: `rgba(0,0,0,${opacity == 1 ? '0' : '0.3'})`
				}">
				<u-icon color="#ffffff" size="30" :name="options.source == 'share' ? 'home' : 'arrow-left'"></u-icon>
			</view>
		</u-navbar>

		<view class="loading" v-if="productInfo == '' && !fail"><u-loading mode="circle"></u-loading></view>
		<view v-if="fail" class="loading"><u-empty mode="page"></u-empty></view>
		<template v-if="productInfo != ''">
			<u-swiper @click="swiperClick" :border-radius="0" height="750" bg-color="transparent"
				:list="productInfo.goodsMainPhoto"></u-swiper>
			<view class="fun">
				
				<!-- open-type="share" -->
				<!-- <button > -->
				<!-- showShare = true -->
				<u-image :fade="false" :show-loading="false" @click="share" mode="widthFix" width="104"
					:src="appletImgUrl+'product-share.png'"></u-image>
				<!-- </button> -->
			</view>
			<view class="content">
				<!-- <view v-if="mainGoodsType==4">
					<view class="price-box-one" v-if="productInfo.redDeductible>=productInfo.salePrice">
						<view class="price-integral">
							<view class="sm-text">红包积分</view>
							<view class="integral-mount">{{productInfo.redIntegral}}</view>
						</view>
						<view class="old-price">原价:￥{{ productInfo.salePrice }}</view>
					</view>
					<view class="price-box-two" v-if="productInfo.redDeductible<productInfo.salePrice">
						<view class="price-integral">
							<view class="sm-text">兑换后￥</view>
							<view class="integral-mount">{{productInfo.salePrice-productInfo.redDeductible+productInfo.redIntegral}}</view>
						</view>
						<view class="price-integral-two">
							红包积分:{{productInfo.redIntegral}}
						</view>
						<view class="old-price">原价:￥{{ productInfo.salePrice }}</view>
					</view>
				</view> -->
				
				
				<view class="v5_price">
					<view class="red-share">分红值{{ productInfo.rebateMhb }}</view>
					<view class="price-plate">
						<view class="new_price"><view class="unit">券</view><view class="price_num">{{ productInfo.salePrice }}</view></view>
						<view class="old_price">￥{{productInfo.originalPrice}}</view>
					</view>
				</view>
				<!-- v-if="productInfo.groupBuyPersonCount && productInfo.goodsSaleType != 20" -->
				<!-- <view class="red-packet" >
					<view class="tag">
						购买赚红包：
						<text>￥{{ productInfo.goodsRedPacket }}</text>
					</view>
					<view class="tag">抢中赚红包：<text>￥{{productInfo.goodsRedPacket}}</text></view>
					<view class="tag" v-if="productInfo.groupBuyPersonCount && productInfo.goodsSaleType != 20" style="margin-left: 30rpx;">{{productInfo.groupBuyPersonCount}}人团</view>
				</view> -->
				<!-- <view class="price-tip">
					<view class="">{{ productInfo.saleSpots ? productInfo.saleSpots : '经济、实惠' }}</view>
					
					<view class="sales"></view>
				</view> -->
				<view class="name">
					<!-- <text v-if="productInfo.groupBuyPersonCount && productInfo.goodsSaleType != 20">{{productInfo.groupBuyPersonCount}}人团</text> -->
					{{ productInfo.goodsName }}{{ productInfo.unit ? '/' + productInfo.unit : '' }}
					<!-- <text>退货包运费</text> -->
				</view>
				<view class="tip" @click="servicePopupState = true">
					<u-section sub-title=" " :show-line="false" color="#343434"
						title=" 全场包邮   48小时发货 "></u-section>
				</view>
				<u-gap v-if="groupByTotal == 0" height="20"></u-gap>
				<view class="activity" v-if="groupByTotal != 0">
					<view class="activity-item">
						<u-section @click="currentSpellPopupState = true" :show-line="false" color="#343434"
							:title="groupByTotal + '人在抢购，可直接参与'" sub-title="查看更多"></u-section>
					</view>
					<swiper circular vertical :autoplay="true">
						<!-- catchtouchmove="clearTouchMove" -->
						<swiper-item catchtouchmove="clearTouchMove" v-for="(item, index) in groupByList" :key="index">
							<view class="swiper-item">
								<view class="user-card" v-for="(item1, index1) in item" :key="index1">
									<view class="user-img">
										<u-image shape="circle" width="58" height="58" :src="
												item1.launchUserInfo.headPhoto && item1.launchUserInfo.headPhoto != ''
													? imgURL + item1.launchUserInfo.headPhoto
													: appletImgUrl+'logo.png'
											" mode="aspectFill"></u-image>
									</view>
									<view class="user-name">{{ item1.launchUserInfo.nickName || '匿名用户' }}</view>
									<view class="info">
										<view class="">
											还差
											<text>{{ item1.neededUserCount }}</text>
											人拼成
										</view>
										<view class="">
											剩余
											<u-count-down :timestamp="item1.timestamp"></u-count-down>
										</view>
									</view>
									<view class="btn" v-if="myId != item1.userId && myId != item1.myId" @click="
											participatePopupState = true;
											groupItem = item1;
										">
										去抢购
									</view>
									<view class="btn" v-else @click="setGroupCache(item1)">邀请好友</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<!-- <view>分享复制：{{scene}}</view> -->
				<view class="comment" :style="{ 'margin-top': groupByTotal == 0 ? '0' : '20rpx' }">
					<view class="comment-title" @click="
							$u.route('/pages/purchase/productComment/productComment', {
								id: productInfo.id
							})
						">
						评价（{{ commentTotal }}）
						<u-icon name="arrow-right" size="28"></u-icon>
					</view>
					<view style="padding: 20rpx 0;" v-if="commentList == ''">暂无评价</view>
					<view class="comment-item" v-for="(item, index) in commentList" :key="index">
						<view class="comment-user">
							<view class="left">
								<u-image shape="circle" width="58" height="58" :src="item.headPhoto"
									mode="aspectFill"></u-image>
								<view class="user-name">{{ item.nickName }}</view>
							</view>
							<view class="time">{{ item.addTime }}</view>
						</view>
						<view class="rate"><u-rate active-color="#EABC05" :count="item.totalScore"
								v-model="item.totalScore"></u-rate></view>
						<view class="photo" v-if="item.photoUrls != '' && item.photoUrls">
							<view v-for="(item1, index1) in item.photoUrls" :key="index1">
								<u-image :src="imgURL + item1" width="150rpx" height="150rpx"
									@click="imageView(index, index1)"></u-image>
							</view>
						</view>
						<view class="comment-content">{{ item.context }}</view>
					</view>
				</view>
				<view class="detail">
					<view class="detail-title">商品详情</view>
					<template v-if="productInfo.goodsDetailPhoto != ''">
						<block v-for="(item, index) in productInfo.goodsDetailPhoto" :key="index"><u-image :src="item"
								mode="widthFix"></u-image></block>
					</template>
					<template v-else>
						<u-empty mode="data" margin-top="100"></u-empty>
					</template>
				</view>
			</view>
			<view class="safe-area-inset-bottom"></view>
			<view class="navigation-box safe-area-inset-bottom">
				<view class="navigation">
					<view class="left">
						<button class="item" open-type="contact">
							<u-icon :name="appletImgUrl+'product-detail-connect-icon.png'" width="48" height="48"></u-icon>
							<view class="text">客服</view>
						</button>
						<view class="favorites" @click="collection">
							<view class="favorites-icon">
								<u-icon :name="zpImgUrl+'collect-red.png'" size="48" color="#FF1C60" v-if="productInfo.isCollect"></u-icon>
								<u-icon :name="zpImgUrl+'collect.png'" size="48" height="48" color="#aaaaaa" v-else></u-icon>
							</view>
							<view class="text" style="color: #aaaaaa;font-size: 18rpx;">收藏</view>
						</view>
						<!-- <view class="item" v-if="mainGoodsType!=4" open-type="contact"
							@click="jumpCart">
							<u-icon :name="appletImgUrl+'product-detail-shop-cart-icon.png'" width="48" height="48"></u-icon>
							<view class="text">购物车</view>
							<view class="number" v-if="goodsCartNumber >= 1">
								{{ goodsCartNumber >= 100 ? '99+' : goodsCartNumber }}</view>
						</view> -->
					</view>
					<view class="right">
						<!-- <view v-if="productInfo.goodsSaleType == 10 || productInfo.goodsSaleType == 30" class="spell btn" @click="show = true; purchaseState = 1">
							<view class="">
								<view class="">￥{{productInfo.groupBuyPrice}}</view>
								<view class="">发起抢购</view>
							</view>
						</view> -->
						<view class="spell btn"
							 @click="
								productSpecificationsState = true;
								purchaseState = 0;
							">
							<view class="">
								<view class="">立即购买</view>
							</view>
						</view>
						<!-- <view class="spell btn"
							v-if="mainGoodsType==4&&productInfo.redDeductible>=productInfo.salePrice" @click="productSpecificationsState = true;
								purchaseState = 0;">
							<view class="">
								<view class="">立即购买</view>
							</view>
						</view>
						<view class="spell btn"
							v-if="mainGoodsType==4&&productInfo.redDeductible<productInfo.salePrice" @click="mixPay">
							<view class="">
								<view class="">立即购买</view>
							</view>
						</view> -->
					<!-- 	<view class="buy btn" v-if="mainGoodsType!=4" @click="
								productSpecificationsState = true;
								purchaseState = 2;
							">
							<view class="">
								<view class="">加入购物车</view>
							</view>
						</view> -->
						
					</view>
				</view>
			</view>

			<u-popup mode="bottom" safe-area-inset-bottom closeable v-model="servicePopupState" border-radius="40">
				<view class="service-popup">
					<view class="title">服务说明</view>
					<view class="item">
						<view class="">服务说明</view>
						<view class="">所有商品包邮（偏远地区除外）</view>
					</view>
					<view class="item">
						<view class="">7天无理由退货</view>
						<view class="">满足相应条件时，消费者可申请7天无理由退货</view>
					</view>
					<view class="item">
						<view class="">48小时发货</view>
						<view class="">若超时未发货，消费者可取消订单</view>
					</view>
				</view>
			</u-popup>

			<u-popup mode="bottom" border-radius="40" closeable v-model="currentSpellPopupState">
				<view class="current-spell-popup">
					<view class="title">正在抢购</view>
					<scroll-view scroll-y class="scroll-view" @scrolltolower="scrolltolower">
						<view class="item" v-for="(item, index) in groupList" :key="index">
							<view class="left">
								<u-image borStyle="2rpx solid #FD5E1D" width="68" height="68" mode="aspectFill"
									shape="circle"
									:src="item.launchUserInfo.headPhoto && item.launchUserInfo.headPhoto != '' ? imgURL + item.launchUserInfo.headPhoto : appletImgUrl+'logo.png'"></u-image>
								<view class="info">
									<view class="">{{ item.launchUserInfo.nickName || '匿名用户' }}</view>
									<view class="">
										剩余
										<u-count-down separator="zh" :timestamp="item.timestamp"></u-count-down>
									</view>
								</view>
							</view>
							<view class="right" v-if="myId != item.userId && myId != item.myId" @click="
									participatePopupState = true;
									groupItem = item;
								">
								去抢购
							</view>
							<view class="right" v-else @click="setGroupCache(item)">邀请好友</view>
						</view>
						<u-loadmore :status="status"></u-loadmore>
						<u-gap></u-gap>
					</scroll-view>
				</view>
			</u-popup>

			<u-popup mode="center" width="560" border-radius="20" closeable v-model="participatePopupState">
				<view class="participate-popup" v-if="groupItem != ''">
					<view class="title">
						<view class="">参与{{ groupItem.launchUserInfo.nickName || '匿名用户' }}的抢购</view>
						<view class="">
							仅剩
							<text>{{ groupItem.neededUserCount }}</text>
							个名额，
							<u-count-down :timestamp="groupItem.timestamp"></u-count-down>
							结束
						</view>
					</view>
					<view class="user">
						<view class="user-item">
							<view class="u-image">
								<u-image borStyle="2rpx solid #FD5E1D" width="128" height="128" mode="aspectFill"
									shape="circle" :src="
										groupItem.launchUserInfo.headPhoto && groupItem.launchUserInfo.headPhoto != ''
											? imgURL + groupItem.launchUserInfo.headPhoto
											: appletImgUrl+'logo.png'
									"></u-image>
								<view class="tag">拼主</view>
							</view>
						</view>
						<view class="user-item" v-if="groupItem.joinUserList && groupItem.userId != item.id"
							v-for="(item, index) in groupItem.joinUserList" :key="index">
							<view class="u-image">
								<u-image borStyle="2rpx solid #FD5E1D" width="128" height="128" mode="aspectFill"
									shape="circle"
									:src="item.headPhoto && item.headPhoto != '' ? imgURL + item.headPhoto : appletImgUrl+'logo.png'"></u-image>
							</view>
						</view>
						<view class="station" :key="item"
							v-for="item in groupItem.configPersonCount - (groupItem.joinUserList ? groupItem.joinUserList.length : 0)">
							<u-image width="128" height="128" :src="appletImgUrl+'rush-user-icon.png'"></u-image>
						</view>
					</view>
					<view class="btn" @click="
							productSpecificationsState = true;
							purchaseState = 1;
							participateGroup = true;
						">
						参与抢购
					</view>
				</view>
			</u-popup>

			<u-popup mode="bottom" closeable v-model="productSpecificationsState" @close="closePopup">
				<view class="product-specifications-popup">
					<view class="box">
						<view class="product-info">
							<view class="u-image">
								<u-image @click="previewCover" width="200" height="200" border-radius="20" :src="
										goodsSku != ''
											? goodsSku.goodsSkuPhoto != ''
												? imgURL + goodsSku.goodsSkuPhoto
												: productInfo.goodsMainPhoto[0]
											: productInfo.goodsMainPhoto[0]
									"></u-image>
							</view>
							<view class="info">
								<view class="" v-if="mainGoodsType==4">
									<block v-if="productInfo.redDeductible>=productInfo.salePrice">
									<text>红包积分</text>
									{{
										goodsSku != ''? purchaseState == 1? goodsSku.skuGroupBuyPrice * count: (goodsSku.skuPrice-productInfo.redDeductible+productInfo.redIntegral) * count: purchaseState == 1
											? productInfo.groupBuyPrice * count
											: (productInfo.salePrice-productInfo.redDeductible+productInfo.redIntegral) * count
									}}
									<text>/{{ count }}{{ productInfo.unit }}</text>
									</block>
									<block v-if="productInfo.redDeductible<productInfo.salePrice">
										<text>兑换后￥</text>
										{{
											goodsSku != ''? purchaseState == 1? goodsSku.skuGroupBuyPrice * count: (goodsSku.skuPrice-productInfo.redDeductible+productInfo.redIntegral) * count: purchaseState == 1
												? productInfo.groupBuyPrice * count
												: (productInfo.salePrice-productInfo.redDeductible+productInfo.redIntegral) * count
										}}
										<text>/{{ count }}{{ productInfo.unit }}</text>
									</block>
								</view>
								<view class="" v-if="mainGoodsType!=4">
									<text>券</text>
									{{
										goodsSku != ''? purchaseState == 1? goodsSku.skuGroupBuyPrice * count: goodsSku.skuPrice * count: purchaseState == 1
											? productInfo.groupBuyPrice * count
											: productInfo.salePrice * count
									}}
									<text>/{{ count }}{{ productInfo.unit }}</text>
								</view>
								<view class="">
									<!-- <view class="">销量：{{goodsSku.skuSaleCount || productInfo.saleCount}}</view> -->
									<view class=""></view>
									<view class="">库存：{{ goodsSku != '' ? goodsSku.skuStock : productInfo.goodsStock }}
									</view>
								</view>
							</view>
						</view>
						<!-- {{goodsSku != '' ?goodsSku.goodsSkuPhoto : productInfo.goodsMainPhoto[0]}} -->
						<!-- <view class="product-price">￥<text>{{goodsSku == '' ? productInfo.groupBuyPrice : goodsSku.skuGroupBuyPrice}}</text></view> -->
						<block v-for="(item, index) in productInfo.showSkus" :key="index">
							<view class="model-name">
								<view class="title">{{ item.skuKeyName }}</view>
								<view class="item-list">
									<block v-for="(x, i) in item.skuValues" :key="i">
										<view :class="['item', specsIndex[index] == i ? 'active' : '']"
											@click="choiceSpecs(index, i)">{{ x.skuValueName }}</view>
									</block>
								</view>
							</view>
						</block>
						<view class="number">
							<view class="title">数量</view>
							<u-number-box :min="min" :max="goodsSku.skuStock || productInfo.goodsStock"
								v-model="count"></u-number-box>
						</view>
					</view>
					<view class="btn" @click="determine">
						确定
						<view class="safe-area-inset-bottom"></view>
					</view>
				</view>
			</u-popup>
		</template>
		<u-popup close-icon-color="#aaaaaa" mode="center" v-model="show" border-radius="20" closeable>
			<view class="popup">
				<view class="title">提示</view>
				<view class="item">
					<view class="item-title">请选择抢购方式</view>
					<view class="btn">
						<view :class="[groupBuyType == 1 ? 'active' : '']" @click="groupBuyType = 1">公众抢购</view>
						<view :class="[groupBuyType == 2 ? 'active' : '']" @click="groupBuyType = 2">包团抢购</view>
					</view>
				</view>
				<view class="item" style="border-bottom: none;">
					<view class="item-title">是否购买抢购的商品?</view>
					<view class="btn">
						<view :class="[launchType == 1 ? 'active' : '']" @click="launchType = 1">否</view>
						<view :class="[launchType == 2 ? 'active' : '']" @click="launchType = 2">是</view>
					</view>
				</view>
				<view class="submit" @click="confirm">确定</view>
			</view>
		</u-popup>
		<view class="canvas-box"><canvas class="canvas" canvas-id="share"
				style="width: 750rpx;height: 1000rpx;"></canvas></view>

		<view v-if="showShare" class="share-popup" @touchmove.stop.prevent>
			<view>
				<view class="close" @click="showShare = false"><u-icon name="close-circle" size="50"
						color="#fff"></u-icon></view>
				<u-image height="780" :src="shareCodeImageURL" width="580" mode="aspectFit"></u-image>

				<view class="choice">
					<button open-type="share" class="choice-item">
						<u-image :show-loading="false" :src="appletImgUrl+'product-share-wx-icon.png'" width="100"
							height="100"></u-image>
						<view class="text">分享好友</view>
					</button>
					<view class="choice-item" @click="downLoad">
						<u-image :show-loading="false" :src="appletImgUrl+'product-share-save-icon.png'" width="100"
							height="100"></u-image>
						<view class="text">保存图片</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {appletImgUrl,zpImgUrl} from "@/common/config.js"
	import {
		base64src
	} from '@/js_sdk/base64src';
	export default {
		onShareTimeline() {
			return {
				title: this.shareText,
				path: '/pages/productDetail/productDetail?id=' + this.productInfo.id + '&source=share&userId=' + uni
					.getStorageSync('userInfo').id+'&mobilePhone='+uni.getStorageSync('userInfo').userName,
				imageUrl: this.productInfo.goodsMainPhoto[0]
			};
		},
		onShareAppMessage() {
			return {
				title: this.shareText,
				path: '/pages/productDetail/productDetail?id=' + this.productInfo.id + '&source=share&userId=' + uni
					.getStorageSync('userInfo').id+'&mobilePhone='+uni.getStorageSync('userInfo').userName,
				imageUrl: this.productInfo.goodsMainPhoto[0]
			};
		},
		data() {
			return {
				appletImgUrl:appletImgUrl,
				zpImgUrl:zpImgUrl,
				launchType: '1',
				groupBuyType: '1',
				showShare: false,
				groupItem: '',
				participateGroup: false,
				groupByList: [],
				shareCodeImageURL: '',
				status: 'loading',
				pIndex: null,
				count: 1,
				show: false,
				groupByTotal: 0,
				imgURL: this.imageURL,
				min: 1,
				groupList: [],
				cIndex: null,
				productSpecificationsState: false,
				fail: false,
				purchaseState: false,
				servicePopupState: false,
				participatePopupState: false,
				currentSpellPopupState: false,
				opacity: 0,
				productInfo: '',
				commentTotal: 0,
				goodsCartNumber: 0,
				goodsSku: '',
				commentList: [],
				specsIndex: [],
				myId: '',
				options: '',
				mainGoodsType: null ,//1:VIP区，2：优品区，3：爆品区，4：兑换区,5：平价区
				refereeId:"",//分享人，推荐人
				scene:""
			};
		},
		onReady() {},
		onLoad(options) {
			console.log('分享',options)
			if(options.source&& options.source== 'share'){
				this.refereeId=options.userId;
				this.scene="productDetailShare";
				uni.setStorageSync('refereeId', options.userId);
				uni.setStorageSync('mobilePhone', options.mobilePhone);
			}
			this.mainGoodsType=options.mainGoodsType;
			if (options.scene) {
				options.source = 'share';
				let scene = decodeURIComponent(options.scene);
				let sceneArray = scene.split(',');
				options.id = sceneArray[0];
				if (sceneArray[1]) {
					options.userId = sceneArray[1];
				}
			}

			if (options.userId) {
				if (!uni.getStorageSync('userInfo')) {
					uni.setStorageSync('proUserId', options.userId);
				}
				this.userId = options.userId;
			} else {
				this.userId = null;
			}
			//复制链接分享带参数
			wx.onCopyUrl(() => {
			        return {
			          query: 'id='+ this.productInfo.id + '&source=share&userId=' + uni.getStorageSync('userInfo').id+'&mobilePhone='+uni.getStorageSync('userInfo').userName,
			        };
			 });
			this.pageNo = 1;
			this.options = options;
			this.init(options);
		},
		onShow() {
			console.log(uni.getStorageSync('userInfo'))
			this.getGoodsCart();
		},
		onUnload() {
			uni.removeStorageSync('purchasedSeparatelyInfo');
		},
		onPullDownRefresh() {
			this.pageNo = 1;
			this.status = 'loading';
			this.init(this.options);
		},
		methods: {
			convertGood(){
				
			},
			jumpCart(){
				
				if(this.myId==""){
					uni.navigateTo({
						url: '/pages/user/login/login?scene='+this.scene
					});
				}else{
					uni.switchTab({
						url: '/pages/tabBar/goodsCart/goodsCart'
					});
				}
			},
			getGoodsCart() {
				if (!uni.getStorageSync('userInfo')) {
					// this.$u.route('/pages/user/login/login')
					return;
				}
				this.$u.get('goodscart/productGoodsCount').then(res => {
					this.goodsCartNumber = res;
				});
			},
			share() {
				const self = this;
				self.$u
					.post('user/getwxacodeunlimit', {
						page: 'pages/productDetail/productDetail',
						scene: self.productInfo.id + ',' + uni.getStorageSync('userInfo').id || ''
					})
					.then(response => {
						let codeImageURL = response;
						codeImageURL = codeImageURL.replace(/[\r\n]/g, '');

						const context = uni.createCanvasContext('share');
						uni.showLoading({
							title: '绘制中...',
							mask: true
						});
						uni.getImageInfo({
							src: self.productInfo.goodsMainPhoto[0],
							success(res) {
								self.drawImage(context, uni.upx2px(750), uni.upx2px(750), res.path, res.width,
									res.height, 0, 0);

								context.setFillStyle('#fff');
								context.fillRect(0, uni.upx2px(750), uni.upx2px(750), uni.upx2px(300));

								context.setFillStyle('#000');
								context.setFontSize(uni.upx2px(40));

								self.canvasWraptitleText(context, self.productInfo.goodsName, uni.upx2px(50),
									uni.upx2px(820), uni.upx2px(450), uni.upx2px(50), 2);

								context.drawImage(self.appletImgUrl+'product-team-number-bg.png', uni.upx2px(50), uni
									.upx2px(910), uni.upx2px(125), uni.upx2px(55));

								context.setFillStyle('#fff');
								context.font = 'normal bold ' + uni.upx2px(36) + 'px sans-serif';
								// let text = self.productInfo.goodsSaleType == 20 ? '心动价' : self.productInfo.groupBuyPersonCount + '人团'
								let text = '心动价';
								// let textOffset = self.productInfo.goodsSaleType == 20 ? 60 : 68
								let textOffset = 60;
								context.fillText(text, uni.upx2px(textOffset), uni.upx2px(952));

								context.setFillStyle('#FF4D46');
								context.font = 'normal bold ' + uni.upx2px(30) + 'px sans-serif';
								context.fillText('￥', uni.upx2px(190), uni.upx2px(958));

								context.setFillStyle('#FF4D46');
								context.font = 'normal bold ' + uni.upx2px(48) + 'px sans-serif';
								context.fillText(self.productInfo.salePrice, uni.upx2px(220), uni.upx2px(960));

								base64src('data:image/png;base64,' + codeImageURL, result => {
									context.drawImage(result, uni.upx2px(550), uni.upx2px(770), uni
										.upx2px(165), uni.upx2px(165));

									context.setFillStyle('#aaaaaa');
									context.font = 'normal 300 ' + uni.upx2px(26) + 'px sans-serif';
									context.fillText('长按识别小程序', uni.upx2px(540), uni.upx2px(980));

									context.draw(false, () => {
										uni.canvasToTempFilePath({
											canvasId: 'share',
											success({
												tempFilePath
											}) {
												self.shareCodeImageURL = tempFilePath;
												self.showShare = true;
												uni.showToast({
													title: '绘制成功'
												});
												wx.getFileSystemManager().unlink({
													filePath: result,
													success(res) {
														console.log(res);
													},
													fail(error) {
														console.log(error);
													}
												});
											}
										});
									});
								});
							}
						});
					});
			},
			downLoad() {
				uni.saveImageToPhotosAlbum({
					filePath: this.shareCodeImageURL,
					success(res) {
						uni.showToast({
							title: '保存成功'
						});
					}
				});
			},
			scrolltolower() {
				if (this.status == 'loading' || this.status == 'nomore') return;
				this.status = 'loading';
				this.pageNo++;
				this.getGroupBuyingList((list, result, count) => {
					if (list == '') {
						this.status = 'nomore';
						return;
					}
					this.groupList = this.groupList.concat(list);
					this.status = 'loadmore';
				}, this.options);
			},
			getGroupBuyingList(callback, options) {
				this.$u
					.post('groupbuyinglist/getGroupBuyingList', {
						goodsId: options.id,
						pageNo: this.pageNo,
						pageSize: 10
					})
					.then(res => {
						let result = [];
						let currentTime = new Date();
						let cDate = `${currentTime.getFullYear()}-${currentTime.getMonth() +
						1}-${currentTime.getDate()} ${currentTime.getHours()}:${currentTime.getMinutes()}:${currentTime.getSeconds()}`;
						cDate = cDate.replace(/-/g, ':').replace(' ', ':');
						cDate = cDate.split(':');
						let date1 = new Date(cDate[0], cDate[1] - 1, cDate[2], cDate[3], cDate[4], cDate[5]);
						res.list.forEach(item => {
							let buyingEstimateTime = item.buyingEstimateTime;
							buyingEstimateTime = buyingEstimateTime.replace(/-/g, ':').replace(' ', ':');
							buyingEstimateTime = buyingEstimateTime.split(':');
							let date2 = new Date(
								buyingEstimateTime[0],
								buyingEstimateTime[1] - 1,
								buyingEstimateTime[2],
								buyingEstimateTime[3],
								buyingEstimateTime[4],
								buyingEstimateTime[5]
							);
							let date3 = (date2.getTime() - date1.getTime()) / 1000; //相差秒数
							if (item.joinUserList) {
								let myId = item.joinUserList.filter(res => res.id == this.myId);
								if (myId != '') {
									item.myId = myId[0].id;
								}
							}
							item.timestamp = date3;
						});
						for (let i = 0; i < res.list.length; i += 2) {
							result.push(res.list.slice(i, i + 2));
						}
						callback(res.list, result, res.count);
					});
			},
			canvasWraptitleText(canvas, text, x, y, maxWidth, lineHeight, maxRowNum) {
				if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
					return;
				}
				canvas.font = 'normal bold ' + uni.upx2px(40) + 'px sans-serif'; //绘制文字的字号和大小
				// 字符分隔为数组
				var arrText = text.split('');
				var line = '';
				var rowNum = 1;
				for (var n = 0; n < arrText.length; n++) {
					var testLine = line + arrText[n];
					var metrics = canvas.measureText(testLine);
					var testWidth = metrics.width;
					if (testWidth > maxWidth && n > 0) {
						if (rowNum >= maxRowNum) {
							var arrLine = testLine.split('');
							arrLine.splice(-2);
							var newTestLine = arrLine.join('');
							newTestLine += '...';
							canvas.fillText(newTestLine, x, y);
							//如果需要在省略号后面添加其他的东西，就在这个位置写（列如添加扫码查看详情字样）
							//canvas.fillStyle = '#2259CA';
							//canvas.fillText('扫码查看详情',x + maxWidth-90, y);
							return;
						}
						canvas.fillText(line, x, y);
						line = arrText[n];
						y += lineHeight;
						rowNum += 1;
					} else {
						line = testLine;
					}
				}
				canvas.fillText(line, x, y);
			},
			init(options) {
				this.myId = uni.getStorageSync('userInfo').id || '';
				this.arr = [];
				this.specsIndexArray = [];
				this.skuName = [];
				const self = this;
				if (options.source) {
					this.source = options.source;
				}
				try {
					this.$u
						.get('goods/info/' + options.id)
						.then(res => {
							let filterGoodsMainPhoto = res.goodsMainPhoto.split(','),
								splicingGoodsMainPhotoImageURL = filterGoodsMainPhoto.map(item => {
									return self.imageURL + item;
								});

							let filterGoodsDetailPhoto = res.goodsDetailPhoto.split(','),
								splicingGoodsDetailPhotoImageURL = filterGoodsDetailPhoto.map(item => {
									return self.imageURL + item;
								});
							res.goodsMainPhoto = splicingGoodsMainPhotoImageURL;
							res.goodsDetailPhoto = splicingGoodsDetailPhotoImageURL;
							self.productInfo = res;

							// let sharePrice = this.productInfo.goodsSaleType == 20 ? this.productInfo.salePrice : this.productInfo.groupBuyPrice
							let sharePrice = this.productInfo.salePrice;
							this.shareText = this.productInfo.goodsName + '￥' + sharePrice + '/' + this.productInfo
								.unit;
							if (self.productInfo.showSkus) {
								self.productInfo.showSkus.forEach(item => {
									self.specsIndexArray.push(null);
								});
								res.goodsSku.forEach(item => {
									item.skuInfo = item.skuInfo.split(',');
								});
							}
							uni.stopPullDownRefresh();
						})
						.catch(err => {
							self.fail = true;
						});

					this.$u
						.post('orderformcomment/goodsCommentList', {
							goodsId: options.id,
							pageNo: 1,
							pageSize: 5
						})
						.then(res => {
							if (!res) return;
							res.list.forEach(item => {
								if (item.headPhoto) {
									if (item.headPhoto.indexOf('https') != 0) {
										item.headPhoto = this.imageURL + item.headPhoto;
									}
								} else {
									item.headPhoto = this.appletImgUrl+'team-head-img.png';
								}
								if (item.photoUrls != '' && item.photoUrls) {
									item.photoUrls = item.photoUrls.split(',');
								}
							});
							this.commentTotal = res.count;
							this.commentList = res.list;
						});

					// this.getGroupBuyingList((list, result, count) => {
					// 	this.groupByTotal = count
					// 	this.groupByList = result
					// 	this.groupList = list
					// 	uni.stopPullDownRefresh()
					// 	this.status = list.length < 10 ? 'nomore' : 'loadmore'
					// }, options)
				} catch (error) {
					uni.stopPullDownRefresh();
				}
			},
			drawImage(ctx, bg_w, bg_h, imgPath, imgWidth, imgHeight, x, y) {
				let dWidth = bg_w / imgWidth; // canvas与图片的宽度比例
				let dHeight = bg_h / imgHeight; // canvas与图片的高度比例
				if ((imgWidth > bg_w && imgHeight > bg_h) || (imgWidth < bg_w && imgHeight < bg_h)) {
					if (dWidth > dHeight) {
						ctx.drawImage(imgPath, 0, (imgHeight - bg_h / dWidth) / 2, imgWidth, bg_h / dWidth, x, y, bg_w,
							bg_h);
					} else {
						ctx.drawImage(imgPath, (imgWidth - bg_w / dHeight) / 2, 0, bg_w / dHeight, imgHeight, x, y, bg_w,
							bg_h);
					}
				} else {
					if (imgWidth < bg_w) {
						ctx.drawImage(imgPath, 0, (imgHeight - bg_h / dWidth) / 2, imgWidth, bg_h / dWidth, x, y, bg_w,
							bg_h);
					} else {
						ctx.drawImage(imgPath, (imgWidth - bg_w / dHeight) / 2, 0, bg_w / dHeight, imgHeight, x, y, bg_w,
							bg_h);
					}
				}
			},
			setGroupCache(e) {
				this.$u.route('/pages/user/inviteFriends/inviteFriends', {
					groupBuyingListId: e.id
				});
			},
			imageView(pindex, cindex) {
				let new_arr = [];
				this.commentList[pindex].photoUrls.forEach(item => {
					new_arr.push(this.imageURL + item);
				});
				uni.previewImage({
					current: cindex,
					urls: new_arr
				});
			},
			collection() {
				this.$u.get('goods/goodsCollect/' + this.productInfo.id).then(res => {
					this.productInfo.isCollect = !this.productInfo.isCollect;
					uni.showToast({
						title: this.productInfo.isCollect ? '收藏成功' : '已取消',
						icon: 'none'
					});
				});
			},
			back() {
				if (this.source == 'share') {
					this.$u.route({
						url: '/pages/tabBar/newIndex/newIndex',
						type: 'tab'
					});
					return;
				}
				uni.navigateBack();
			},
			previewCover() {
				let url = '';
				if (this.goodsSku == '') {
					url = this.productInfo.goodsMainPhoto[0];
					uni.previewImage({
						urls: [url]
					});
					return;
				}
				if (this.goodsSku.goodsSkuPhoto != '') {
					url = this.goodsSku.goodsSkuPhoto != '' ? this.imageURL + this.goodsSku.goodsSkuPhoto : this
						.productInfo.goodsMainPhoto[0];
					uni.previewImage({
						urls: [url]
					});
				} else {
					uni.showToast({
						title: '商家尚未上传该预览图',
						icon: 'none'
					});
				}
			},
			choiceSpecs(parentIndex, childIndex) {
				this.specsIndexArray[parentIndex] = this.specsIndex[parentIndex] == childIndex ? null : childIndex;
				this.specsIndex = [...this.specsIndexArray];
				let isEmpty = this.specsIndex.filter(item => item == null),
					goodsSkuIndex;

				if (this.specsIndexArray[parentIndex] != null) {
					let {
						skuKeyId
					} = this.productInfo.showSkus[parentIndex], {
						skuValueId
					} = this.productInfo.showSkus[parentIndex].skuValues[childIndex];
					let key = `${skuKeyId}:${skuValueId}`;

					this.productInfo.goodsSku.forEach((item, eachIndex) => {
						goodsSkuIndex = item.skuInfo.findIndex(index => index == key);
						if (goodsSkuIndex != -1) {
							if (this.arr[goodsSkuIndex] == key) return;
							this.arr[goodsSkuIndex] = key;
							this.skuName[goodsSkuIndex] = this.productInfo.showSkus[parentIndex].skuValues[
								childIndex].skuValueName;
						}
					});
				} else {
					// this.arr[this.specsIndex.findIndex(item => item == null)] = null
				}
				if (isEmpty.length == 0) {
					let skuInfo = this.arr.join(',');
					let goodsSku = this.productInfo.goodsSku.filter(item => item.skuInfo == skuInfo)[0];
					if (goodsSku.goodsSkuPhoto != '') goodsSku.goodsSkuPhoto = goodsSku.goodsSkuPhoto;
					// if (goodsSku.goodsSkuPhoto != '') goodsSku.goodsSkuPhoto = this.imageURL + goodsSku.goodsSkuPhoto
					this.goodsSku = goodsSku;
					// this.skuName =
					// 	`${this.productInfo.showSkus[parentIndex].skuKeyName},${this.productInfo.showSkus[parentIndex].skuValues[childIndex].skuValueName}`
				} else {
					this.goodsSku = '';
					// this.skuName = ''
				}
			},
			confirm() {
				if (this.launchType == 1) {
					if (!uni.getStorageSync('userInfo')) {
						this.$u.route('/pages/user/login/login?scene='+this.scene);
						return;
					}
					this.$u
						.post('groupbuyinglist/launchGroupBuyingList', {
							goodsId: this.productInfo.id,
							launchType: 1,
							groupBuyType: this.groupBuyType
						})
						.then(res => {
							this.$u.route('/pages/user/launchRecord/launchRecord');
						});
					return;
				}
				this.launchType = this.launchType;
				this.productSpecificationsState = true;
				this.show = false;
			},
			updateAddress(item) {
				this.userAddressId = item.id;
			},
			closePopup() {
				console.log(10)
				if (this.specificationsState) {
					console.log(11)
					uni.setStorageSync('purchasedSeparatelyInfo', {
						goodsMainPhoto: this.goodsSku != '' ?
							this.goodsSku.goodsSkuPhoto ?
							this.imageURL + this.goodsSku.goodsSkuPhoto :
							this.productInfo.goodsMainPhoto[0] :
							this.productInfo.goodsMainPhoto[0],
						sellerStoreId: this.productInfo.sellerStoreId,
						goodsName: this.productInfo.goodsName,
						count: this.count,
						skuAttrs: this.productInfo.showSkus != '' ? this.arr.join(',') : '',
						skuName: this.skuName.join('，'),
						salePrice: this.goodsSku != '' ?
							this.purchaseState == 1 ?
							this.goodsSku.skuGroupBuyPrice :
							this.goodsSku.skuPrice :
							this.purchaseState == 1 ?
							this.productInfo.groupBuyPrice :
							this.productInfo.salePrice,
						redIntegral:this.productInfo.redIntegral,
						redDeductible:this.productInfo.redDeductible
							
					});
					if (this.purchaseState == 0) {
						console.log(12)
						if (this.saveError) return;
						this.$u.route('/pages/purchase/placeOrder/placeOrder', {
							cartsId: this.purchaseState == 0 ? this.cartsId : '',
							purchaseState: this.purchaseState,
							mainGoodsType:this.mainGoodsType,
							goodsClassId:this.productInfo.goodsClassId
						});
					} else if (this.purchaseState == 1) {
						console.log(13)
						if (!this.participateGroup) {
							console.log(14)
							this.$u.route('/pages/purchase/placeOrder/placeOrder', {
								purchaseState: 1,
								launchType: this.launchType,
								goodsId: this.productInfo.id,
								mainGoodsType:this.mainGoodsType,
								goodsClassId:this.productInfo.goodsClassId
							});
						} else {
							console.log(15)
							this.$u.route('/pages/purchase/placeOrder/placeOrder', {
								participateGroup: true,
								purchaseState: 1,
								groupBuyingListId: this.groupItem.id,
								goodsId: this.productInfo.id,
								groupBuyType: this.groupBuyType,
								mainGoodsType:this.mainGoodsType,
								goodsClassId:this.productInfo.goodsClassId
							});
						}
					}
					this.specificationsState = false;
					this.participateGroup = false;
				}
			},
			
			async determine() {
				// console.log(333,this.scene)
				if (this.productInfo.showSkus && this.specsIndex == '') {
					console.log(1)
					uni.showToast({
						title: '请选择商品规格',
						icon: 'none'
					});
					return;
				}
				if (this.productInfo.showSkus && this.specsIndex.indexOf(null) > -1) {
					console.log(2)
					uni.showToast({
						title: '请选择商品' + this.productInfo.showSkus[this.specsIndex.findIndex(item => item ==
							null)].skuKeyName,
						icon: 'none'
					});
					return;
				}
				// if (this.productInfo.showSkus && (this.productInfo.goodsStock == 0 || this.productInfo.goodsSku.filter(item =>
				// 		item.skuInfo == this.arr.join(','))[
				// 		0].skuStock == 0)) {
				// 	uni.showToast({
				// 		title: '库存不足',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if (this.productInfo.goodsStock == 0 || (this.productInfo.showSkus && this.productInfo.goodsSku.filter(
						item => item.skuInfo == this.arr.join(','))[0].skuStock == 0)) {
							console.log(3)
					uni.showToast({
						title: '库存不足',
						icon: 'none'
					});
					return;
				}
				if (this.purchaseState == 0 || this.purchaseState == 2) {
					console.log(4)
					if (!uni.getStorageSync('userInfo')) {
						this.$u.route('/pages/user/login/login?scene='+this.scene);
						return;
					}

					let json = {
						goodsId: this.productInfo.id,
						storeId: this.productInfo.sellerStoreId,
						// directBuy: 1,
						goodsCount: this.count,
						promoterUserId: this.userId,
						mainGoodsType:this.mainGoodsType
					};

					if (this.purchaseState == 0) {
						json.directBuy = 1;
					}

					if (this.productInfo.showSkus != undefined) {
						json.skuAttrs = this.arr.join(',');
					}

					try {
						console.log(5)
						this.cartsId = await this.$u.post('goodscart/save', json);
						if (this.purchaseState == 2) {
							console.log(6)
							uni.showToast({
								title: '加入成功！'
							});
							setTimeout(() => {
								this.getGoodsCart();
							}, 1500);
						}
						if (this.saveError) {
							console.log(7)
							this.saveError = false;
						}
					} catch (e) {
						this.saveError = true;
					}
				} else {
					console.log(8)
					if (!uni.getStorageSync('userInfo')) {
						this.$u.route('/pages/user/login/login',{scene:this.scene});
						return;
					}
				}
				this.productSpecificationsState = false;
				this.specificationsState = true;
			},
			clearTouchMove(e) {
				return false;
			},
			swiperClick(e) {
				uni.previewImage({
					current: e,
					urls: this.productInfo.goodsMainPhoto
				});
			},
			mixPay(){
				uni.showToast({
					title: '目前仅支持全额积分购买！',
					icon: 'none'
				});
			}
		},
		onPageScroll({
			scrollTop
		}) {
			var opacity = 0,
				maxNumber = uni.getSystemInfoSync().statusBarHeight + 44;
			if (scrollTop <= maxNumber) {
				opacity = scrollTop / maxNumber;
			} else {
				opacity = 1;
			}
			if (opacity == this.opacity) return;
			this.opacity = opacity;
		}
	};
</script>

<style lang="scss">
	.share-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		padding-top: 150rpx;
		justify-content: center;
		background-color: rgba($color: #000000, $alpha: 0.5);

		>view {
			position: relative;
		}

		.close {
			position: absolute;
			right: -65rpx;
			top: -60rpx;
		}

		.choice {
			display: flex;
			margin-top: 100rpx;
			justify-content: space-between;
			align-items: center;
			width: 580rpx;
			padding: 0 50rpx;

			button {
				padding: 0;
				line-height: normal;
				margin: 0;
				background: none;

				&::after {
					border: none;
				}
			}

			.choice-item {
				text-align: center;
			}

			.text {
				color: #fff;
				font-size: 28rpx;
				margin-top: 10rpx;
			}
		}
	}

	.canvas-box {
		position: absolute;
		bottom: 0;
		left: -99999px;
		// display: none;
		opacity: 0;
		z-index: -999;
	}

	.popup {
		padding-bottom: 60rpx;
		width: 560rpx;

		.submit {
			line-height: 80rpx;
			background: linear-gradient(90deg, #fd5d1d, #fd9c1d);
			width: 440rpx;
			font-size: 30rpx;
			color: #ffffff;
			margin: 0 auto;
			text-align: center;
			border-radius: 10rpx;
		}

		.item {
			margin: 0 60rpx;
			margin-bottom: 30rpx;
			border-bottom: 1rpx solid #dddddd;

			.item-title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.btn {
				padding: 30rpx 0;
				display: flex;
				padding-left: 1rpx;

				>view {
					height: 60rpx;
					border-radius: 10rpx;
					line-height: 60rpx;
					width: 210rpx;
					text-align: center;
					border: 1rpx solid #f39e22;
					color: #f39e22;

					&:last-child {
						margin-left: 20rpx;
					}

					&.active {
						background-color: #f39e22;
						color: #ffffff;
					}
				}
			}
		}

		.title {
			padding: 45rpx 0;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	.red-packet {
		background-color: #ffffff;
		padding-bottom: 20rpx;
		padding-left: 30rpx;
		// display: flex;

		.tag {
			color: #fff;
			display: flex;
			justify-content: space-between;
			width: 300rpx;
			padding: 3rpx 15rpx;
			font-size: 26rpx;
			background: url('~@/static/product-list-tag-bg.png') no-repeat center / 100% 100%;

			&:first-child {
				margin-bottom: 10rpx;
			}

			text {
				color: #ff4d46;
			}
		}
	}

	.back-icon {
		margin-left: 20rpx;
		background-color: rgba($color: #000000, $alpha: 0.3);
		width: 54rpx;
		height: 54rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loading {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}

	.product-specifications-popup {
		.box {
			padding: 0 30rpx;

			.product-info {
				position: relative;
				padding-left: 220rpx;
				display: flex;
				// margin-bottom: 80rpx;

				.info {
					flex: 1;
					padding-top: 20rpx;

					>view {
						&:last-child {
							margin-top: 40rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 30rpx;
						}

						&:first-child {
							font-size: 36rpx;
							color: #ff4d46;

							text {
								&:first-child {
									color: #ff4d46;
									font-size: 20rpx;
								}

								&:last-child {
									color: #aaaaaa;
									font-size: 24rpx;
								}
							}
						}
					}
				}

				.u-image {
					position: absolute;
					left: 0;
					top: 0;
					transform: translateY(-20rpx);
				}
			}
		}

		.btn {
			margin-top: 100rpx;
			background: linear-gradient(90deg, #ff3768, #fc6161);
			text-align: center;
			color: #ffffff;
			font-size: 30rpx;
			padding: 30rpx 0;
			border-radius: 40rpx 40rpx 0 0;
		}

		.number {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 0;

			.title {
				font-size: 30rpx;
				font-weight: bold;
			}
		}

		.model-name {
			margin-top: 40rpx;

			.item-list {
				display: flex;
				flex-wrap: wrap;

				.item {
					font-size: 26rpx;
					padding: 5rpx 20rpx;
					margin-top: 20rpx;
					text-align: center;
					border-radius: 10rpx;
					background-color: rgba($color: #aaaaaa, $alpha: 0.2);
					margin-right: 11rpx;
					color: #aaaaaa;

					&.active {
						background-color: rgba($color: #f39a15, $alpha: 0.2);
						color: #f39a15;
					}
				}
			}

			.title {
				font-size: 30rpx;
				font-weight: bold;
			}
		}

		.product-price {
			padding: 20rpx 0;
			padding-bottom: 0;
			color: #ff4e47;
			font-size: 20rpx;

			text {
				font-size: 36rpx;
				font-weight: bold;
			}
		}
	}

	.participate-popup {
		padding: 20rpx 30rpx;
		padding-top: 70rpx;

		.btn {
			margin-top: 66rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			color: #ffffff;
			font-size: 30rpx;
			background: linear-gradient(90deg, #fd5c1d, #fd9b1d);
			border-radius: 10rpx;
		}

		.user {
			// margin-top: 35rpx;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			// width: 457rpx;
			margin: 0 auto;

			.station {
				// width: 128rpx;
				// height: 128rpx;
				// margin-left: 28rpx;
				// margin: 0 14rpx;
				// display: flex;
				// align-items: center;
				// justify-content: center;
				// background-color: #EEEEEE;
				// border-radius: 50%;
				// border: 1rpx dashed #AEAEAE;
				// font-size: 60rpx;
				// color: #AAAAAA;
				margin-top: 35rpx;
				padding: 0 14rpx;
			}

			.user-item {
				// margin-right: 40rpx;
				// margin-left: 28rpx;
				margin-top: 35rpx;
				padding: 0 14rpx;

				.tag {
					position: absolute;
					bottom: -20rpx;
					left: 50%;
					width: 76rpx;
					transform: translateX(-50%);
					text-align: center;
					background: linear-gradient(90deg, #fd5c1d, #fd9b1d);
					border: 1rpx solid #ffffff;
					border-radius: 17px;
					color: #ffffff;
					font-size: 24rpx;
					padding: 2rpx 0;
				}

				.u-image {
					position: relative;
					width: 128rpx;
					height: 128rpx;
					// border: 2rpx solid #F39D21;
					// border-radius: 50%;
				}
			}
		}

		.title {
			text-align: center;

			view {
				&:first-child {
					font-size: 28rpx;
				}

				&:last-child {
					font-size: 24rpx;

					text {
						color: #ff4d46;
					}
				}
			}
		}
	}

	.current-spell-popup {
		.scroll-view {
			height: 900rpx;

			.item {
				display: flex;

				justify-content: space-between;
				align-items: center;
				padding: 30rpx;

				.right {
					width: 140rpx;
					color: #ffffff;
					font-size: 28rpx;
					text-align: center;
					line-height: 60rpx;
					height: 60rpx;
					background: linear-gradient(90deg, #fd5c1d, #fd9b1d);
					border-radius: 10rpx;
				}

				.left {
					display: flex;
					align-items: center;

					// .u-image {
					// 	border-radius: 50%;
					// 	border: 2rpx solid #FD5E1D;
					// }

					.info {
						margin-left: 20rpx;

						view {
							&:first-child {
								font-size: 30rpx;
							}

							&:last-child {
								color: #aaaaaa;
								font-size: 28rpx;
							}
						}
					}
				}
			}
		}

		.title {
			border-bottom: 1rpx solid #ebebeb;
			text-align: center;
			padding: 30rpx 0;
			margin: 0 30rpx;
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	.service-popup {
		padding: 0 30rpx;
		padding-bottom: 30rpx;

		.title {
			border-bottom: 1rpx solid #ebebeb;
			text-align: center;
			padding: 30rpx 0;
			font-size: 36rpx;
			font-weight: bold;
		}

		.item {
			padding: 20rpx 0;

			view {
				&:first-child {
					font-weight: bold;
					font-size: 30rpx;
				}

				&:last-child {
					font-size: 28rpx;
				}
			}
		}
	}

	.price-tip {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		background-color: #ffffff;
		padding-bottom: 20rpx;

		view {
			font-size: 24rpx;

			&:first-child {
				padding: 2rpx 13rpx;
				background-color: rgba($color: #ff4e46, $alpha: 0.1);
				border-radius: 4px;
				color: #ff4e47;
				margin-right: 20rpx;
			}

			&:last-child {
				color: #343434;
				white-space: nowrap;
			}
		}
	}

	.navigation-box {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #ffffff;
		width: 750rpx;
	}

	.navigation {
		display: flex;
		// border-top: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		// padding: 16rpx 0;
		justify-content: space-between;
		height: 100rpx;
		align-items: center;

		.left {
			display: flex;
			font-size: 20rpx;
			flex: 1;
			align-items: center;
			padding: 0 60rpx;
			justify-content: flex-start;

			.item {
				// margin: 0 25rpx;
				// display: flex;
				background: none;
				padding: 0;
				margin: 0;
				line-height: normal;
				text-align: center;
				position: relative;
				margin-right: 40rpx;

				.number {
					position: absolute;
					right: -10rpx;
					top: -10rpx;
					width: 30rpx;
					line-height: 30rpx;
					text-align: center;
					border-radius: 50%;
					background-color: #ff4d46;
					color: #fff;
					font-size: 18rpx;
				}

				&::after {
					border: none;
				}

				.text {
					// margin-left: 10rpx;
					font-size: 18rpx;
					color: #aaaaaa;
				}

				// align-items: center;
			}
		}

		.right {
			display: flex;
			font-size: 24rpx;
			align-items: center;
			height: 100%;

			.btn {
				// line-height: 110rpx;
				padding: 0 50rpx;
				height: 100%;
				display: flex;
				align-items: center;

				view {
					// line-height: normal;
					text-align: center;
				}

				color: #ffffff;
			}

			.spell {
				background-color: #ff4e46;
			}

			.buy {
				background-color: #f39e22;
			}
		}
	}

	.comment {
		background-color: #ffffff;
		padding: 30rpx;
		padding-bottom: 0;
		// margin-top: 20rpx;
		margin-bottom: 20rpx;

		.comment-item {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f7f7f7;

			.photo {
				display: flex;
				padding-top: 20rpx;

				>view {
					margin-left: 30rpx;

					&:first-child {
						margin-left: 0;
					}
				}
			}

			&:last-child {
				border-bottom: none;
			}

			.comment-user {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;
				}

				.time {
					font-size: 22rpx;
				}

				.user-name {
					margin-left: 20rpx;
					font-size: 28rpx;
				}
			}

			.rate {
				padding-top: 20rpx;
			}

			.comment-content {
				font-size: 28rpx;
				margin-top: 20rpx;
				color: #343434;
				line-height: 40rpx;
			}
		}

		.comment-title {
			font-size: 36rpx;
			border-bottom: 1rpx solid #f7f7f7;
			// margin-bottom: 30rpx;
			font-weight: bold;
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;
			align-items: center;

			text {
				font-size: 28rpx;
				color: #aaaaaa;
			}
		}
	}

	.detail {
		background-color: #ffffff;
		padding: 30rpx;

		.detail-title {
			font-size: 36rpx;
			margin-bottom: 30rpx;
			font-weight: bold;
		}
	}

	.activity {
		margin: 20rpx 0;
		position: relative;

		swiper {
			height: 350rpx;
			overflow: hidden;

			swiper-item {
				padding: 20rpx;
				box-sizing: border-box;
			}

			.swiper-item {
				display: flex;
				height: auto;

				// padding-top: 20rpx;
				.user-card {
					// flex: 1;
					width: 50%;
					background-color: #ffffff;
					border-radius: 20rpx;
					height: 290rpx;

					.btn {
						color: #ffffff;
						margin: 0 auto;
						width: 180rpx;
						text-align: center;
						padding: 15rpx 0;
						font-size: 28rpx;
						background: linear-gradient(90deg, #fd5d1d, #fd9c1d);
						border-radius: 10px;
					}

					.info {
						margin: 20rpx;
						font-size: 28rpx;
						color: #343434;
						text-align: center;

						text {
							color: #ffa03a;
						}
					}

					.user-name {
						text-align: center;
						font-size: 28rpx;
					}

					.user-img {
						margin: 20rpx auto;
						width: 58rpx;
					}

					&:first-child {
						margin-right: 10rpx;
					}

					&:last-child {
						margin-left: 10rpx;
					}
				}
			}
		}

		.activity-item {
			padding: 20rpx 30rpx;
			background-color: #ffffff;
		}
	}

	.name {
		font-size: 36rpx;
		color: #343434;
		padding: 0 20rpx;
		font-weight: bold;
		padding-bottom: 20rpx;
		background-color: #ffffff;

		text {
			color: #fff;
			font-size: 26rpx;
			padding: 4rpx 15rpx;
			margin-right: 10rpx;
			background: linear-gradient(90deg, #ff3768, #fc6161);
			border-radius: 10rpx;
			display: inline-block;
			transform: translateY(-4rpx);
		}
	}

	.tip {
		padding: 20rpx;
		border-top: 1rpx solid #f7f7f7;
		background-color: #ffffff;
	}

	.price {
		font-size: 24rpx;
		padding: 20rpx 30rpx;
		padding-bottom: 10rpx;
		background-color: #ffffff;
		color: #ff4e47;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
		text {
			font-size: 48rpx;
			font-weight: bold;
		}
		.fenhong{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			margin-left: 10rpx;
			margin-top: 14rpx;
			
			.fenhong-left{
				background: linear-gradient(90deg, #f48e35, #fa245c);
				color: #fff;
				text-align: center;
				width: 100rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-bottom-left-radius: 4rpx;
				border-top-left-radius: 4rpx;
			}
			.fenhong-right{
				text-align: center;
				height: 40rpx;
				width: 100rpx;
				color: #ecb169;
				line-height: 40rpx;
				border: 2rpx solid #f4f4f4;
				border-bottom-right-radius: 4rpx;
				border-top-right-radius: 4rpx;
			}
		}
	}

	page {
		background-color: #f7f7f7;
		padding-bottom: 120rpx;
	}

	.fun {
		position: absolute;
		display: flex;
		right: 0;
		justify-content: flex-end;
		transform: translateY(-65rpx);

		button {
			padding: 0;

			background: none;

			&::after {
				border: none;
			}
		}
	}

	.price-box-one {
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding: 20rpx 30rpx;

		.price-integral {
			color: #FF1C60;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;

			.sm-text {
				font-size: 24rpx;
				margin-top: 22rpx;
				height: 42rpx;
				margin-right: 10rpx;
			}

			.integral-mount {
				font-size: 48rpx;
				font-weight: bold;
			}
		}

		.old-price {
			color: #C2C2C2;
			text-decoration: line-through;
			margin-top: 22rpx;
			height: 42rpx;
			font-size: 24rpx;
			margin-left: 10rpx;
		}
	}
	.price-box-two{
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding: 20rpx 30rpx;
		.price-integral{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			.sm-text{
				font-size: 24rpx;
				color: #FF1C60;
				padding-top: 22rpx;
			}
			.integral-mount{
				font-size: 48rpx;
				color:#FF1C60;
				font-weight: bold;
			}
		}
		.price-integral-two{
			font-size: 24rpx;
			color: #fff;
			background: linear-gradient(to right, #FFA858, #E42548);
			height: 44rpx;
			line-height: 44rpx;
			padding-left: 10rpx;
			padding-right: 10rpx;
			border-radius:20rpx;
			margin-top: 8rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
		}
		.old-price{
			font-size: 24rpx;
			color: #C2C2C2;
			text-decoration: line-through;
			padding-top: 22rpx;
		}
	}
	.v5_price{
		background-color: #fff;
		padding: 20rpx 30rpx;
		.red-share{
			display: inline-block;
			background: linear-gradient(to right, #FFE794, #EABF26);
			font-size: 22rpx;
			    padding: 6rpx 14rpx;
			    border-radius: 10rpx;
			    color: #000;
			    margin-bottom: 10rpx;
		}
		.price-plate{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			.new_price{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				.unit{
					font-size: 24rpx;
					color: #ff4e47;
					margin-top: 22rpx;
					font-weight: bold;
				}
				.price_num{
					font-size: 48rpx;
					font-weight: bold;
					color: #ff4e47;
				}
			}
			.old_price{
				color: #C2C2C2;
				text-decoration: line-through;
				margin-top: 20rpx;
				margin-left: 20rpx;
			}
		}
	}
</style>